<template>
	<view class="search-container">
		<mescroll-uni ref="mescrollRef" bgColor="white" top="1rpx" @init="mescrollInit" @down="downCallback" :down="{auto: false}" @up="upCallback"
			:up="upOption">
			<view class="videos-container">
				<view v-for="(item, index) in lists" :key="index" class="videos-item m-b-20">
					<view class="flex2">
						<view style="flex: 1;">
							<view class="header-title md line-2">{{ item.type_desc }}</view>
							<view class="header-time muted xs m-t-20">{{ item.time }}</view>
							<view class="content sm lighter">{{ item.remark }}</view>
						</view>
					</view>
				</view>
			</view>
			<loading-view v-if="loading"></loading-view>
		</mescroll-uni>
	</view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import { tgsr } from '@/api/others.js';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			searchName: '',
			loading: true,
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			lists: [
				// {
				// 	id:1,
				// 	title: '专家教您如何健康饮食专家教您如何健康饮食专家教您如何健康饮食专家教您如何健康饮食',
				// 	create_time: '2021/8/18 11:00',
				// 	content: '剑未佩妥，出门已是江湖'
				// },
				// {
				// 	id:2,
				// 	title: '专家教您如何健康饮食',
				// 	create_time: '2021/8/18 11:00',
				// 	content: '后悔了解的晚了'
				// }
			],

			upOption: {
				auto: true, // 不自动加载
				noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: '/static/images/empty/order.png',
					tip: '暂无数据', // 提示
					fixed: true,
					top: '200rpx'
				}
			}
		};
	},

	methods: {
		// 搜索
		handleSearch(value) {
			console.log(this.searchName);
			this.mescroll && this.mescroll.resetUpScroll();
		},
		// 下拉刷新
		downCallback() {
			this.upCallback({
				num: 1,
				size: 10
			});
		},
		// 上拉加载
		upCallback({ num, size }) {
			tgsr({
				page_no: num,
				page_size: size
			})
				.then((res) => {
					if (num == 1) this.lists = []; //如果是第一页需手动置空列表
					this.lists = this.lists.concat(res.lists); //追加新数据
					this.mescroll.endSuccess(res.lists.length, res.count);
					setTimeout(() => {
						this.loading = false;
					}, 500);
				})
				.catch((err) => {
					console.log('444');
				});
		},
		
	},
	onLoad(options) {
	
	}
};
</script>

<style lang="scss">
.videos-container {
	padding:20rpx;
	position: relative;
	z-index: 1;

	.videos-item {
		background-color: white;
		padding: 20rpx 30rpx;
		border-radius: 10rpx;

		.img {
			width: 330rpx;
			height: 200rpx;
			margin-right: 20rpx;
		}
		.header-title {
			font-weight: bold;
			font-size: 30rpx;
		}
		.content {
			margin: 20rpx 0 10rpx 0;
			padding-bottom: 10rpx;
		}
	}
}
</style>